import React, { useState } from 'react'
import { StyleSheet, Text, View, Button } from 'react-native'

// hook组件
export default function HookPage() {

    const [name, setName] = useState('hook')

    const changeName = (name) => {
        !name ? name = 'yinpeng' : name
        setName(name)
    }

    return (
        <View style={layout.box}>
            <Text style={layout.baise}>hello {name}</Text>

            <View>
                <Button title="改变name" onPress={() => changeName('changeName')} />
            </View>
        </View>
    )
}

// 配置标题
HookPage.navigationOptions = {
    title: 'Hook Page'
}

const layout = StyleSheet.create({
    box: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        borderStyle: 'solid',
        borderWidth: 1,
        borderColor: '#2196F3',
        backgroundColor: '#2196F3',
        margin: 20,
        padding: 5,
        borderRadius: 10,
    },

    huise: {
        color: '#666'
    },

    baise: {
        color: '#fff'
    }
})